<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目看板 - 项目管理系统</title>
    <!-- 引入Google字体 - Noto Sans SC -->
    <link href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="/static/dist.css">
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    
    <!-- 引入项目特定样式 -->
    <link rel="stylesheet" href="/static/project.css">
    <style>
        /* 防止页面宽度扩展 */
        body {
            overflow-x: hidden;
        }
        .ml-\[250px\] {
            overflow-x: hidden;
        }
        header {
            overflow-x: hidden;
        }
        main {
            overflow-x: hidden;
        }
        /* 限制用户信息区域宽度 */
        header .flex {
            max-width: 100%;
        }
        header .flex > div:first-child {
            flex-shrink: 0;
            margin-right: 20px;
        }
        header .flex > div:last-child {
            flex-shrink: 0;
        }
        
        /* 用户下拉菜单样式 */
        .user-dropdown {
            position: fixed;
            z-index: 9999;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <div class="flex">
        <!-- 侧边栏导航 -->
        <aside class="fixed inset-y-0 left-0 w-[250px] bg-gray-900 text-white shadow-lg z-20 transition-sidebar">
            <!-- 系统标题/Logo区域 -->
            <div class="flex items-center p-4 border-b border-gray-800">
                <i class="fas fa-tasks text-xl text-primary mr-2"></i>
                <span class="font-bold text-xl">项目管理系统</span>
            </div>
            
            <!-- 主导航菜单 -->
            <nav class="py-4">
                <ul class="space-y-1">
                    <li>
                    <a href="/home" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white ">
                        <i class="fas fa-home w-5 text-center mr-2"></i>
                        <span class="font-medium">首页</span>
                    </a>
                </li>
                    <!-- 项目管理菜单 -->
                    <li>
                        <div class="project-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white bg-gray-800 text-white" onclick="toggleMenu('project-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-folder-open w-5 text-center mr-2"></i>
                                    <span class="font-medium">项目管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform rotate-180" id="project-submenu-icon"></i>
                            </a>
                            <ul id="project-submenu" class="pl-8 mt-1 space-y-1 ">
                                <li>
                                    <a href="/dashboard" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white bg-gray-800 text-white">
                                        <i class="fas fa-chart-bar w-5 text-center mr-2"></i>
                                        <span>项目看板</span>
                                    </a>
                                </li>
                                <li>
                                      <a href="/projects" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                          <i class="fas fa-list w-5 text-center mr-2"></i>
                                          <span>项目列表</span>
                                      </a>
                                  </li>
                                  <li>
                                      <a href="/progress/tracking" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                          <i class="fas fa-tasks w-5 text-center mr-2"></i>
                                          <span>进度跟踪</span>
                                      </a>
                                  </li>
                                <li>
                                    <a href="/gantt/chart" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                        <i class="fas fa-chart-gantt w-5 text-center mr-2"></i>
                                        <span>甘特图</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/work/hour/stats" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                        <i class="fas fa-clock w-5 text-center mr-2"></i>
                                        <span>工时统计</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- 客户管理菜单 -->
                    <li>
                        <div class="customer-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white " onclick="toggleMenu('customer-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-users w-5 text-center mr-2"></i>
                                    <span class="font-medium">客户管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform " id="customer-submenu-icon"></i>
                            </a>
                            <ul id="customer-submenu" class="pl-8 mt-1 space-y-1 hidden">
            <li>
                  <a href="/customers" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                      <i class="fas fa-user-friends w-5 text-center mr-2"></i>
                      <span>客户列表</span>
                  </a>
              </li>
              <li>
                  <a href="/leads" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                      <i class="fas fa-lightbulb w-5 text-center mr-2"></i>
                      <span>销售线索</span>
                  </a>
              </li>
        </ul>
                        </div>
                    </li>
                </ul>
            </nav>
            
            <!-- 底部版权信息 -->
            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-800">
                <p class="text-xs text-gray-500 text-center">© 2025 项目管理系统 版权所有</p>
            </div>
        </aside>

        <!-- 主要内容区域 -->
        <div class="ml-[250px] flex-1">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm">
                <div class="flex justify-between items-center px-6 py-2">
                    <!-- 标题区域 -->
                    <div>
                        <h1 class="text-xl font-bold text-gray-800"></h1>
                        <p class="text-sm text-gray-500 mt-1"></p>
                    </div>
                   
                    <!-- 右侧功能区 -->
                    <div class="flex items-center space-x-4">
                        <!-- 通知图标 -->
                        <div class="relative">
                            <button class="p-2 text-gray-500 hover:text-gray-600">
                                <i class="fas fa-bell"></i>
                                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">3</span>
                            </button>
                        </div>
                       
                        <!-- 用户信息 -->
                        
                        <div class="relative user-menu">
                            <button class="flex items-center focus:outline-none user-menu-button">
                                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2">
                                    <i class="fas fa-user text-white"></i>
                                </div>
                                <span class="text-sm font-medium text-gray-700">系统管理员</span>
                                <i class="fas fa-chevron-down ml-1 text-xs text-gray-500"></i>
                            </button>
                        </div>
                        
                        
                        <!-- 用户下拉菜单 - 移动到body层级 -->
                        
                        <div class="hidden fixed right-6 top-14 w-48 bg-white rounded-md shadow-lg py-1 z-50 user-dropdown">
                            <a href="/home" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                            <a href="/home" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                            <a href="/logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                        </div>
                        
                    </div>
                </div>
            </header>

            <!-- 主体内容 -->
            <main class="p-4 bg-gray-50 h-[calc(100vh-56px)] overflow-auto">
                
<div class="container mx-auto space-y-6">
    <!-- 项目数量概览模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-primary">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-chart-line mr-2"></i>项目数量概览
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 已立项项目 -->
                <div class="bg-primary rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已立项项目</h3>
                    <p class="text-3xl font-bold flex items-center">4<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 未开始项目 -->
                <div class="bg-gray-700 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">未开始项目</h3>
                    <p class="text-3xl font-bold flex items-center">2<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 进行中项目 -->
                <div class="bg-blue-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">进行中项目</h3>
                    <p class="text-3xl font-bold flex items-center">2<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已结项项目 -->
                <div class="bg-green-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已结项项目</h3>
                    <p class="text-3xl font-bold flex items-center">0<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目类型分布和项目来源模块 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 项目类型分布模块 -->
        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div class="px-4 py-3 bg-blue-500">
                <h2 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-pie-chart mr-2"></i>项目类型分布
                </h2>
            </div>
            <div class="p-6">
                <div class="h-64">
                    <div id="projectTypeChart" style="width: 100%; height: 100%;"></div>
                </div>
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">类型占比明细：</h3>
                    <ul class="space-y-2">
                        
                        <li class="flex items-center py-1 px-2 rounded-md hover:bg-gray-50 transition-colors">
                            <span class="inline-block w-3 h-3 mr-2 rounded-sm bg-[#FF6384]"></span>
                            <span class="text-sm text-gray-700">产品研发: 4个项目 (100.0%)</span>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 项目来源模块 -->
        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div class="px-4 py-3 bg-amber-500">
                <h2 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-chart-bar mr-2"></i>项目来源分布
                </h2>
            </div>
            <div class="p-6">
                <div class="h-64">
                    <div id="projectSourceChart" style="width: 100%; height: 100%;"></div>
                </div>
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">项目编号明细：</h3>
                    <ul class="space-y-2">
                        
                        <li class="flex items-start py-1 px-2 rounded-md hover:bg-gray-50 transition-colors">
                            <span class="font-medium text-sm text-gray-700 mr-2">公开招标:</span>
                            <span class="text-sm text-gray-500">无</span>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目经理负载模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-green-500">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-users-cog mr-2"></i>项目经理负载情况
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">项目经理</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责项目数量</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">联系方式</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 flex items-center">
                                <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-gray-500"></i>
                                </div>
                                系统管理员
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
                                    4
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">admin</td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 项目任务进度模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-red-500">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-tasks mr-2"></i>项目任务进度
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <!-- 筛选条件 -->
            <div class="mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="projectFilter" class="block text-sm font-medium text-gray-700 mb-1">项目名称筛选：</label>
                        <select id="projectFilter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-lg">
                            <option value="all">全部项目</option>
                            
                            <option value="1">示例项目1</option>
                            
                            <option value="2">示例项目2</option>
                            
                            <option value="3">示例项目1</option>
                            
                            <option value="4">示例项目2</option>
                            
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">任务状态筛选：</label>
                        <div class="flex space-x-2">
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors">未开始</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">进行中</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors">已验收</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors">已完成</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务数量展示 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 里程碑任务数 -->
                <div class="bg-indigo-600 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">里程碑任务数</h3>
                    <p class="text-3xl font-bold flex items-center">0<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已验收里程碑任务数 -->
                <div class="bg-amber-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已验收里程碑任务数</h3>
                    <p class="text-3xl font-bold flex items-center">0<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 子任务任务数 -->
                <div class="bg-blue-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">子任务任务数</h3>
                    <p class="text-3xl font-bold flex items-center">4<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已验收任务数 -->
                <div class="bg-green-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已验收任务数</h3>
                    <p class="text-3xl font-bold flex items-center">0<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 确保ECharts库加载完成后再初始化图表
    function initCharts() {
        // 检查ECharts是否已加载
        if (typeof echarts === 'undefined') {
            console.error('ECharts库未加载');
            // 如果ECharts未加载，等待100ms后再次尝试
            setTimeout(initCharts, 100);
            return;
        }
        
        try {
            // 初始化ECharts实例
            // 项目类型分布饼图
            const projectTypeChart = echarts.init(document.getElementById('projectTypeChart'));
            
            // 准备数据 - 使用更安全的方式传递JSON数据
            const projectTypeData = JSON.parse('[4]');
            const projectTypeLabels = JSON.parse('["\u4ea7\u54c1\u7814\u53d1"]');
            const projectTypeColors = JSON.parse('["#FF6384"]');
            
            // 构建饼图数据
            const pieData = [];
            for (let i = 0; i < projectTypeLabels.length; i++) {
                pieData.push({
                    value: projectTypeData[i],
                    name: projectTypeLabels[i],
                    itemStyle: {
                        color: projectTypeColors[i]
                    }
                });
            }
            
            // 设置饼图配置项
            const projectTypeOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}个项目 ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 0,
                    data: projectTypeLabels,
                    textStyle: {
                        fontFamily: 'Noto Sans SC',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '项目类型',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '40%'],
                        data: pieData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            borderColor: '#ffffff',
                            borderWidth: 1
                        }
                    }
                ]
            };
            
            // 使用配置项显示图表
            projectTypeChart.setOption(projectTypeOption);
            
            // 项目来源分布柱状图
            const projectSourceChart = echarts.init(document.getElementById('projectSourceChart'));
            
            // 准备数据 - 使用更安全的方式传递JSON数据
            const projectSourceData = JSON.parse('[4]');
            const projectSourceLabels = JSON.parse('["\u516c\u5f00\u62db\u6807"]');
            const projectSourceNumbers = JSON.parse('["\u65e0"]');
            
            // 设置柱状图配置项
            const projectSourceOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        if (!params || !params.length || !params[0]) {
                            return '';
                        }
                        const dataIndex = params[0].dataIndex;
                        return projectSourceLabels[dataIndex] + '<br/>项目数量: ' + projectSourceData[dataIndex] + '<br/>项目编号: ' + projectSourceNumbers[dataIndex];
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: projectSourceLabels,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        fontFamily: 'Noto Sans SC'
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        fontFamily: 'Noto Sans SC'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                },
                series: [
                    {
                        name: '项目数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: projectSourceData,
                        itemStyle: {
                            color: '#4BC0C0',
                            borderColor: '#36A2EB',
                            borderWidth: 1
                        }
                    }
                ]
            };
            
            // 使用配置项显示图表
            projectSourceChart.setOption(projectSourceOption);
            
            // 响应窗口大小变化
            const handleResize = function() {
                projectTypeChart.resize();
                projectSourceChart.resize();
            };
            window.addEventListener('resize', handleResize);
            
            // 清理函数，防止内存泄漏
            window.addEventListener('beforeunload', function() {
                window.removeEventListener('resize', handleResize);
                projectTypeChart.dispose();
                projectSourceChart.dispose();
            });
            
            console.log('图表初始化成功');
        } catch (error) {
            console.error('初始化图表时出错:', error);
        }
    }
    
    // 在页面加载完成后初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 延迟执行以确保ECharts库已加载
        setTimeout(initCharts, 200);
    });
</script>

            </main>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    

    <script>
        // 切换菜单展开/折叠
        function toggleMenu(menuId) {
    const submenu = document.getElementById(menuId);
    const icon = document.getElementById(menuId + '-icon');
    
    // 获取所有子菜单
    const allSubmenus = document.querySelectorAll('[id$="-submenu"]');
    const allIcons = document.querySelectorAll('[id$="-submenu-icon"]');
    
    if (submenu.classList.contains('hidden')) {
        // 展开菜单
        // 先折叠所有其他菜单
        allSubmenus.forEach(menu => {
            if (menu.id !== menuId) {
                menu.classList.add('hidden');
            }
        });
        
        // 重置所有其他菜单的图标
        allIcons.forEach(submenuIcon => {
            if (submenuIcon.id !== menuId + '-icon') {
                submenuIcon.classList.remove('rotate-180');
            }
        });
        
        // 展开当前菜单
        submenu.classList.remove('hidden');
        icon.classList.add('rotate-180');
    } else {
        // 折叠菜单
        submenu.classList.add('hidden');
        icon.classList.remove('rotate-180');
    }
}
        
        // 用户下拉菜单
        (function() {
            // 等待DOM完全加载
            function initUserDropdown() {
                const userMenuButton = document.querySelector('.user-menu-button');
                const userDropdown = document.querySelector('.user-dropdown');
                
                if (userMenuButton && userDropdown) {
                    // 移除之前的事件监听器（如果有）
                    userMenuButton.removeEventListener('click', handleUserMenuClick);
                    document.removeEventListener('click', handleDocumentClick);
                    userDropdown.removeEventListener('click', handleDropdownClick);
                    
                    // 添加新的事件监听器
                    userMenuButton.addEventListener('click', handleUserMenuClick);
                    document.addEventListener('click', handleDocumentClick);
                    userDropdown.addEventListener('click', handleDropdownClick);
                }
            }
            
            // 处理用户菜单按钮点击事件
            function handleUserMenuClick(e) {
                e.preventDefault();
                e.stopPropagation();
                const userDropdown = document.querySelector('.user-dropdown');
                if (userDropdown) {
                    // 计算下拉菜单位置
                    const buttonRect = e.currentTarget.getBoundingClientRect();
                    userDropdown.style.top = (buttonRect.bottom + 5) + 'px';
                    userDropdown.style.right = (window.innerWidth - buttonRect.right - 24) + 'px';
                    userDropdown.classList.toggle('hidden');
                }
            }
            
            // 处理文档点击事件
            function handleDocumentClick() {
                const userDropdown = document.querySelector('.user-dropdown');
                if (userDropdown && !userDropdown.classList.contains('hidden')) {
                    userDropdown.classList.add('hidden');
                }
            }
            
            // 处理下拉菜单点击事件
            function handleDropdownClick(e) {
                e.stopPropagation();
            }
            
            // 初始化
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initUserDropdown);
            } else {
                // DOM已经加载完成，直接初始化
                initUserDropdown();
            }
        })();
    </script>


</body>
</html>